import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import ReactHotLoader, { AppContainer } from 'react-hot-loader';
import createBrowserHistory from 'history/createBrowserHistory';
import PatchedReactDOM from '@hot-loader/react-dom';
import { Provider } from 'mobx-react';
import App from './master';
import AppState from '../store/app-state';

ReactHotLoader.patch(React, PatchedReactDOM);

const initialState = window.__INITIAL__STATE__ || {};

const root = document.getElementById('root');
const render = (Component) => {
  ReactDOM.hydrate(
    <AppContainer>
      <Provider appState={new AppState(initialState.appState)}>
        <BrowserRouter>
          <Component />
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    root,
  )
}

render(App);

if(module.hot) {
  module.hot.accept('./master', () => {
    const NextApp = require('./master').default;
    render(NextApp);
  })
}